<template>
  <div class="image-cell">
    <el-image
      v-if="src"
      :src="src"
      :preview-src-list="[src]"
      :fit="'cover'"
      :style="imgStyle"
    >
      <div slot="error" class="image-cell__placeholder">加载失败</div>
    </el-image>
    <span v-else class="image-cell__placeholder">暂无图片</span>
  </div>
</template>

<script>
export default {
  name: "ImageCell",
  props: {
    src: {
      type: String,
      default: ""
    },
    width: {
      type: [String, Number],
      default: 50
    },
    height: {
      type: [String, Number],
      default: 50
    },
    shape: {
      type: String,
      default: "square", // 可选值：square, circle
      validator: val => ["square", "circle"].includes(val)
    }
  },
  computed: {
    imgStyle() {
      let style = {
        width: typeof this.width === "number" ? this.width + "px" : this.width,
        height: typeof this.height === "number" ? this.height + "px" : this.height,
      };
      if (this.shape === "circle") {
        style.borderRadius = "50%";
      } else {
        style.borderRadius = "6px"; // 方形加点圆角
      }
      return style;
    }
  }
};
</script>

<style scoped>
.image-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-cell__placeholder {
  font-size: 12px;
  color: #aaa;
  text-align: center;
}
</style>
